@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --el-color-primary: #34d399 !important;
  --el-color-primary-light-1: #065f46 !important;
  --el-color-primary-light-2: #047857 !important;
  --el-color-primary-light-3: #059669 !important;
  --el-color-primary-light-4: #10b981 !important;
  --el-color-primary-light-5: #34d399 !important;
  --el-color-primary-light-6: #6ee7b7 !important;
  --el-color-primary-light-7: #a7f3d0 !important;
  --el-color-primary-light-8: #d1fae5 !important;
  --el-color-primary-light-9: #ecfdf5 !important;
  --el-color-primary-dark-2: #047857 !important;
  --el-text-color-primary: text-slate-700 !important;
}

:root {
  &.dark {
    --el-color-primary: #34d399 !important;
    --el-color-primary-light-9: transparent !important; // hover按钮背景色
    --el-border-color-base: #57534e !important;
    --el-text-color-regular: #e2e8f0 !important;
    --el-text-color-primary: text-slate-200 !important;
    --el-bg-color: #141414 !important;
    --el-color-white: #fff !important;
    --el-border-color-lighter: #474648 !important;
    --el-border-color-light: #474648 !important;
    --el-button-active-bg-color: red;

    --el-popover-bg-color: #292524 !important;
    --el-fill-color-blank: #141414 !important;
    --el-fill-color-light: #222222 !important;
    --el-bg-color-overlay: #141414 !important;
    --el-mask-color: #222222 !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --el-color-primary: #059669 !important;

    --el-color-primary-light-9: #57534e !important;

    --el-border-color-base: #57534e !important;
    --el-text-color-regular: #e2e8f0 !important;
    --el-text-color-primary: text-slate-200 !important;
    --el-bg-color: #474648 !important;
    --el-color-white: #141414 !important;
    --el-border-color-lighter: #474648 !important;
    --el-border-color-light: #474648 !important;

    --el-popover-bg-color: #292524 !important;
  }
}

html,
body {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  @apply text-slate-700 bg-white transition-all;
  @apply dark:bg-[#141414] dark:text-slate-100;
}

.hover-text {
  @apply hover:text-emerald-400 transition-colors cursor-pointer;
}

.badge {
  .el-badge__content.is-fixed {
    @apply scale-75 bg-white text-slate-500 text-xs bg-opacity-50 border-0 left-2 -top-2;
  }
}

.el-popover.el-popper {
  min-width: auto;
}

.el-tabs__nav-wrap::after {
  height: 0 !important;
}

.el-tabs__header {
  margin: 0 !important;
}

/* el-divider样式无效bug */
.el-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin: 0 8px;
  vertical-align: middle;
  position: relative;
  border-left: 1px var(--el-border-color) var(--el-border-style);
  @apply dark:border-stone-800;
}

.el-table {
  // 播放中+背景
  .table-playing {
    @apply bg-emerald-50 dark:bg-[#222];
  }
  // 边框
  td,
  th {
    border-bottom: none !important;
  }
  .el-table__inner-wrapper::before {
    height: 0;
  }
  // 过渡
  tr {
    @apply transition-colors;
  }
}

.el-tabs {
  .el-tabs__header {
    @apply sticky top-0 z-10 bg-white dark:bg-[#141414] transition-all;
  }
}

.el-skeleton {
  font-size: 0; // 骨架屏图片间隙
}
